<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水逆退散局 - 运势详情</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="../assets/css/tailwind.css">
</head>
<body class="bg-gray-100">
  <div class="phone-frame mx-auto">
    <!-- 状态栏 -->
    <div class="status-bar">
      <span>20:30</span>
      <div class="flex space-x-2">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>
    
    <!-- 微信小程序顶部导航 -->
    <div class="wechat-header flex items-center">
      <a href="result.html" class="text-gray-800 px-3">
        <i class="fas fa-chevron-left"></i>
      </a>
      <span class="flex-1 text-center">运势详情</span>
      <div class="w-10"></div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="app-content p-4 bg-gray-50">
      <!-- 日期信息 -->
      <div class="text-center mb-4">
        <div class="text-sm text-gray-500">2024年6月15日 星期六</div>
        <div class="text-xs text-gray-400 mt-1">农历五月初十</div>
      </div>
      
      <!-- 分类标签 -->
      <div class="flex overflow-x-auto mb-4 bg-white rounded-lg shadow-sm">
        <a href="#career" class="tab-active py-3 px-5 text-center text-sm font-medium whitespace-nowrap">
          事业运
        </a>
        <a href="#wealth" class="py-3 px-5 text-center text-sm font-medium text-gray-500 whitespace-nowrap">
          财运
        </a>
        <a href="#health" class="py-3 px-5 text-center text-sm font-medium text-gray-500 whitespace-nowrap">
          健康运
        </a>
        <a href="#relationship" class="py-3 px-5 text-center text-sm font-medium text-gray-500 whitespace-nowrap">
          人际运
        </a>
        <a href="#love" class="py-3 px-5 text-center text-sm font-medium text-gray-500 whitespace-nowrap">
          感情运
        </a>
      </div>
      
      <!-- 事业运详情 -->
      <div id="career" class="bg-white rounded-lg shadow-md p-5 mb-5">
        <div class="flex items-center mb-4">
          <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
            <i class="fas fa-briefcase text-blue-500"></i>
          </div>
          <div>
            <h3 class="font-bold text-gray-800">事业运 <span class="text-blue-500">60分</span></h3>
            <div class="flex mt-1">
              <div class="text-yellow-500 text-xs">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="far fa-star"></i>
                <i class="far fa-star"></i>
              </div>
              <span class="text-xs text-gray-500 ml-2">一般</span>
            </div>
          </div>
        </div>
        
        <p class="text-gray-600 text-sm leading-relaxed mb-4">
          今日事业运势一般，水逆影响使工作沟通可能出现障碍，建议谨慎处理重要决策。与同事交流时注意倾听，避免误解。当前不适合开展新项目，适合完成已有工作和整理过去未完成事项。处理文件时需多次核对，特别是电子邮件和合同内容。
        </p>
        
        <div class="border-t border-gray-100 pt-3">
          <h4 class="font-medium text-gray-700 mb-2">注意事项：</h4>
          <ul class="text-sm text-gray-600 space-y-2">
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-blue-500 mt-1 mr-2"></i>
              <span>多次检查重要文件和邮件内容</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-blue-500 mt-1 mr-2"></i>
              <span>避免做出重大决策或承诺</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-blue-500 mt-1 mr-2"></i>
              <span>提前做好备份计划，防止信息丢失</span>
            </li>
          </ul>
        </div>
      </div>
      
      <!-- 财运详情 -->
      <div id="wealth" class="bg-white rounded-lg shadow-md p-5 mb-5">
        <div class="flex items-center mb-4">
          <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
            <i class="fas fa-coins text-green-500"></i>
          </div>
          <div>
            <h3 class="font-bold text-gray-800">财运 <span class="text-green-500">85分</span></h3>
            <div class="flex mt-1">
              <div class="text-yellow-500 text-xs">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="far fa-star"></i>
              </div>
              <span class="text-xs text-gray-500 ml-2">优秀</span>
            </div>
          </div>
        </div>
        
        <p class="text-gray-600 text-sm leading-relaxed mb-4">
          今日财运表现优异，适合进行投资和理财活动。意外收入可能出现，但仍需保持谨慎态度。固定收入稳定，甚至可能有加薪或奖金机会。适合偿还债务和制定长期财务计划。避免冲动消费，优先考虑必要支出。
        </p>
        
        <div class="border-t border-gray-100 pt-3">
          <h4 class="font-medium text-gray-700 mb-2">财运提升建议：</h4>
          <ul class="text-sm text-gray-600 space-y-2">
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i>
              <span>适合进行稳健型投资</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i>
              <span>避免借钱给朋友或家人</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i>
              <span>携带幸运色物品有助于增强财运</span>
            </li>
          </ul>
        </div>
      </div>
      
      <!-- 健康运详情 -->
      <div id="health" class="bg-white rounded-lg shadow-md p-5 mb-16">
        <div class="flex items-center mb-4">
          <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
            <i class="fas fa-heartbeat text-red-500"></i>
          </div>
          <div>
            <h3 class="font-bold text-gray-800">健康运 <span class="text-red-500">75分</span></h3>
            <div class="flex mt-1">
              <div class="text-yellow-500 text-xs">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star-half-alt"></i>
                <i class="far fa-star"></i>
              </div>
              <span class="text-xs text-gray-500 ml-2">良好</span>
            </div>
          </div>
        </div>
        
        <p class="text-gray-600 text-sm leading-relaxed mb-4">
          今日健康状况良好，但需注意休息，避免过度劳累。水逆期间容易出现头痛、失眠等问题，建议保持规律作息。饮食宜清淡，多补充水分和维生素。避免高强度运动，适合进行瑜伽、散步等舒缓活动。
        </p>
        
        <div class="border-t border-gray-100 pt-3">
          <h4 class="font-medium text-gray-700 mb-2">健康提示：</h4>
          <ul class="text-sm text-gray-600 space-y-2">
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-red-500 mt-1 mr-2"></i>
              <span>保持充足睡眠，避免熬夜</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-red-500 mt-1 mr-2"></i>
              <span>饮食规律，避免刺激性食物</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-red-500 mt-1 mr-2"></i>
              <span>适当放松心情，减轻精神压力</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    
    <!-- 底部标签栏 -->
    <div class="fixed bottom-0 left-0 right-0 h-14 bg-white border-t border-gray-200 flex justify-around items-center" style="width: 374px;">
      <a href="home.html" class="flex flex-col items-center">
        <i class="fas fa-home text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-400">首页</span>
      </a>
      <a href="#" class="flex flex-col items-center">
        <i class="fas fa-history text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-400">历史</span>
      </a>
      <a href="profile.html" class="flex flex-col items-center">
        <i class="fas fa-user text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-400">我的</span>
      </a>
    </div>
  </div>
</body>
</html> 